<template>
    <div class="wrap">
      <div>
        <back title="确认订单"></back>
        <div class="select_stair_type" v-if="select_stair_type" @touchmove.prevent>

          <div @touchmove.stop="stop_slider" @touchstart="start_slider">
            <p>
              <span>请选择</span>
              <b @click="select_stair_type=false">x</b>
            </p>
            <ul ref="scroll_wrap">
              <li v-for="item in go_stair_type" :class="go_stair===item.id?'active':''" @click="selet_stair_type(item.id,item.title)">{{item.title}}</li>
            </ul>
          </div>
        </div>
        <div class="select_stair_type" v-if="select_stair_number" @touchmove.prevent>
          <div @touchmove.stop="stop_slider" @touchstart="start_slider">
            <p>
              <span>请选择</span>
              <b @click="select_stair_number=false">x</b>
            </p>
            <ul ref="scroll_wrap"  @scroll.prevent="scroll">
              <li v-for="item in stair_number_arr" :class="stair_number===item?'active':''" @click="selet_stair_number(item)">{{item}}层</li>
            </ul>
          </div>
        </div>
        <div class="select_stair_type" v-if="select_day" @touchmove.prevent>
          <div @touchmove.stop="stop_slider" @touchstart="start_slider">
            <p>
              <span>请选择</span>
              <b @click="select_day=false">x</b>
            </p>
            <ul ref="scroll_wrap"  @scroll.prevent="scroll">
              <li v-for="item in day_list" :class="day_time===item.day?'active':''" @click="select_dayF(item)">{{item.day}}</li>
            </ul>
          </div>
        </div>
        <div class="select_stair_type" v-if="select_time" @touchmove.prevent>
          <div @touchmove.stop="stop_slider" @touchstart="start_slider">
            <p>
              <span>请选择</span>
              <b @click="select_time=false">x</b>
            </p>
            <ul ref="scroll_wrap"  @scroll.prevent="scroll">
              <li v-for="item in time_list" :class="time_time===item?'active':''" @click="selet_timeF(item)">{{item}}</li>
            </ul>
          </div>
        </div>
        <div class="items_wrap">
          <p>
            <span>商品清单</span>
            <b>数量</b>
          </p>
          <div class="items_content">
            <div v-for="(item , index) in data" v-if="index<(show?data.length:3)">
              <p>
                <b v-show="item.allowBuy===0">无货</b>
                <img :src="item.img" alt="">
              </p>
              <div>
                <p>{{item.names}}</p>
                <div>
                  <p>¥{{item.price}} /{{item.unit}}</p>
                  <span>{{item.amount}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <p class="show" v-if="!show&&data.length>3" @click="show=!show">展开全部清单</p>
        <p class="mini" v-if="show&&data.length>3" @click="show=!show">收起清单</p>
        <div class="payment_type_wrap">
          <p>支付方式</p>
          <div @click="pty_type=0"><span :class="pty_type===0?'active':''"></span><b>在线支付</b></div>
          <!--<div @click="pty_type=4"><span :class="pty_type===4?'active':''"></span><b>对公打款</b></div>-->
        </div>
        <div class="peisong_type_wrap">
          <p>配送方式</p>
          <div @click="(tack_type=0,get_order_info())"><span  :class="tack_type===0?'active':''"></span><b>铭材快递</b></div>
          <div @click="(tack_type=1,get_order_info())"><span  :class="tack_type===1?'active':''"></span><b>自取货物</b></div>
        </div>
        <div class="go_stair_type" v-if="tack_type===0">
          <div ><span>铭材上楼</span><b @click="select_stair_type=true">{{stair_type_text}}</b></div>
          <div v-if="go_stair!==-1"><span>选择楼层</span><b @click="select_stair_number=true">{{stair_number}}层</b></div>
        </div>
        <div class="invoice_wrap" v-if="isInvoice" :class="isInvoice?'isInvoice':''">
          <div><i @click="isInvoice=!isInvoice"></i><span>开票</span><b>增值税发票加收8%的费用</b></div>
          <p v-show="isInvoice">填写信息</p>
        </div>
        <div class="address_wrap"  v-if="tack_type===0">
          <div>
            <p>收货地址</p>
            <div>
              <div v-show="!select_address" @click="is_address=true" class="select_address">点击添加收货地址</div>
              <div v-if="select_address" class="address"  @click="is_address=true">
                <div>
                  <span>{{select_address.names}}</span><b>{{select_address.phone}}</b>
                </div>
                <p>{{ select_address.region+' '+ select_address.address}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="tack_time_wrap"  v-if="tack_type===0">
           <p>配送时间</p>
          <div v-if="allData">
            <p @click="select_day=true">{{day_time}}</p>
            <p @click="select_time=true">{{time_time}}</p>
          </div>
        </div>
        <div class="order_remark_wrap">
          <span>订单备注：</span>
          <div>
            <input type="text" v-model="order_remark" placeholder="如有需要">
          </div>
        </div>
        <div class="coupon_wrap">
           <p v-if="!allData.coupon">您没有可用的优惠券</p>
           <div v-for="couponItem in allData.coupon&&allData.coupon.couponList" v-if="allData.coupon" @click="toCoupon"><span>已使用优惠券</span><i></i><b>- ¥{{couponItem.money}}</b></div>
        </div>
        <div class="price_wrap">
           <p><span>累计货款</span><b>¥{{allData.goodsPrice}}</b></p>
           <p><span>搬运费</span><b>¥{{allData.carryPrice }}</b></p>
           <p><span>运费</span><b>¥{{allData.deliveryPrice }}</b></p>
           <p><span>优惠金额</span><b style="color: #999">-¥{{allData.discountPrice}}</b></p>
        </div>

      </div>
      <div class="tijiao_wrap">
        <p>应付 ¥{{allData.realPrice}}</p>
        <div @click="order_enter">提交订单</div>
      </div>
      <v-addres v-if="is_address" :id="select_address&&select_address.addrId" @selected_address="selected_address" @cancle="cancle" :title="'请选择地址'"></v-addres>
      <router-view @get_order_info="get_order_info"></router-view>
      <div class="loading_wrap" v-show="isLoading">
         <loading></loading>
      </div>
    </div>
</template>

<script>
  import back from 'components/back'
  import loading from 'base/loading'
  import {get_create_order,get_tack_time,create_order} from 'api/order'
  import {get_cookie} from 'assets/cookie/cookie'
  import { stop_slider, isWXGZH } from 'assets/base/base'
  import vAddres from 'components/address'
  import {mapMutations} from 'vuex'
    export default {
        name: "order-confirm",
      data(){
          return{
            data:[],
            allData:{},
            show:false,
            stair_type_text:'不需要',
            select_stair_type:false,
            select_stair_number:false,
            select_day:false,
            select_time:false,
            go_stair_type:[
              {
                id:-1,
                title:"不需要"
              },{
                id:0,
                title:"楼梯"
              },{
                id:1,
                title:"电梯"
              },
            ],
            stair_number_arr:[],
            isInvoice:false,
            is_address:false,
            select_address:null, //地址信息
            day_time:'',   //配送日期
            time_time:'',  //配送时间
            day_list:[],
            time_list:[],
            order_remark:'', //备注
            addressId:'',  //地址ID
            pty_type:0, // 支付方式   0=在线支付 1=货到付款 2 =积分支付 3=自提支付 4=对公打款
            go_stair:-1,  //上楼方式  -1不选择  1楼梯  2电梯
            tack_type:0,     //配送方式  0快递  1自提
            stair_number:1,  //楼层
            couponId:'',
            isLoading:false
          }
      },
      activated(){
        this.show=false
        this.is_address=false
        this.stair_number_arr=[]
        this.order_remark=''
        this.select_address=null
        for(let i=1;i<100;i++){
          this.stair_number_arr.push(i)
        }

        this.get_order_info()

        get_tack_time({}).then((res)=>{
          if(res.status===200&&res.data.resStatus===0){
             this.day_list=res.data.data
            this.time_list=res.data.data[0].times
          }
        })
      },
      methods:{
        scroll(){
          console.log(1)
        },
        toCoupon(){
          this.$router.push('/orderConfirm/couponList')
        },
        selectCoupon(id){

        },
        get_order_info(){
          this.isLoading=true
          get_create_order({
            token:get_cookie('key'),
            addrId:this.select_address&&this.select_address.addrId,
            deliveryWay:this.tack_type,
            isInvoice:0,
            carryWay:this.go_stair,
            layer:this.stair_number
          }).then((res)=>{
            console.log(res.data)
            this.isLoading=false
            if(res.status===200&&res.data.resStatus===0){
              this.data=res.data.data.goodsList
              this.allData=res.data.data
              if(res.data.data.address){
                this.select_address={}
                this.select_address.addrId=res.data.data.address.Id
                this.select_address.phone=res.data.data.address.ConsigneePhone
                this.select_address.names=res.data.data.address.ConsigneeName
                this.select_address.region=res.data.data.address.Region
                this.select_address.address=res.data.data.address.ConsigneeAddress
              }
              if(this.allData){
                this.day_time=this.allData.deliveryTime.day
                this.time_time=this.allData.deliveryTime.times
              }
            }else{
              this.setHint({
                text:res.data.message,
                ok:false,
                isHint:true
              })
              this.$router.back()
            }
          })
        },
        start_slider(e){
          this.start={
            X:e.touches[0].pageX,
            Y:e.touches[0].pageY
          }
        },
        stop_slider(e){
          stop_slider(e,this.$refs.scroll_wrap,this.start)
        },
        selet_stair_type(id,text){
          this.go_stair=id
          this.stair_type_text=text
          this.select_stair_type=false
          this.get_order_info()
        },
        selet_stair_number(n){
          this.stair_number=n
          this.select_stair_number=false
          this.get_order_info()
        },
        cancle(item){
          if(item){
            this.select_address=item
            this.get_order_info()
          }
          this.is_address=false
        },
        selected_address(item){
          console.log(item)
          this.is_address=false
         this.select_address=item
          this.get_order_info()
        },
        select_dayF(item){
          this.select_day=false
          this.day_time=item.day
          this.time_list=item.times
        },
        selet_timeF(title){
          this.time_time=title
          this.select_time=false
        },
        order_enter(){
          if(this.tack_type===1||(this.select_address&&this.select_address.addrId)){

            let couponList=[]

            for(let i=0;i<(this.allData.coupon&&this.allData.coupon.couponList.length);i++){
              couponList.push(this.allData.coupon.couponList[i].id)
            }
            console.log(couponList)
            create_order({
              token:get_cookie('key'),
              payWay:this.pty_type,
              addrId:this.select_address&&this.select_address.addrId,
              deliveryWay:this.tack_type,
              remark:this.order_remark,
              deliveryTime:this.day_time+' '+this.time_time,
              carryWay:this.tack_type===0?this.go_stair:-1,
              layer:this.stair_number,
              invoiceId:'',
              invoiceAddrId:'',
              couponId:couponList
            }).then((res)=>{
              console.log(res)
              if(res.status===200&&res.data.resStatus===0){
                if(this.pty_type===4){
                  this.$router.push({
                    path: "/myOrder",
                    query: {
                      type:"0"
                    }
                  })
                }else{
                  console.log(res.data.data)
                  if (isWXGZH()) {
                    this.$router.push({
                      path: "/pay",
                      query: {
                        orderId: res.data.data.orderId,
                      }
                    })
                  } else {
                    this.$router.push({
                      path: '/payment/pay',
                      query: {
                        id: res.data.data.orderId,
                        price: '',
                        form: 'orders'
                      }
                    })
                  }
                }

              }else{
                this.setHint({
                  text:res.data.message,
                  ok:false,
                  isHint:true
                })
              }
            })
          }else{
            this.setHint({
              text:'请填写地址信息！',
              ok:false,
              isHint:true
            })
            return
          }
        },
        ...mapMutations({
          setHint:'SET_HINT'
        })
      },
      components:{
          back,
        vAddres,
        loading
      }
    }
</script>

<style scoped lang="scss">
    .wrap {
      padding-top: 46px;
      padding-bottom: 50px;
      position: relative;
      >div:first-child{
        background-color: #eee;
      }
    }
    .select_stair_type{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.1);
      z-index: 10;
      >div{
        overflow: hidden;
        width: 300px;
        position: absolute;
        left: 50%;
        top: 47%;
        transform: translateX(-50%)translateY(-50%);
        background-color: #fff;
        border-radius: 10px;
        >p{
          overflow: hidden;
          padding: 8px;
          >span{
            float: left;
            margin-top: 5px;
            color: #aaa;
            margin-left: 10px;
          }
          >b{
            float: right;
            width: 20px;
            height: 20px;
            font-size: 18px;
            line-height: 20px;
            color: #bbb;
          }
        }
        >ul{
          overflow: auto;
          max-height: 350px;
          -webkit-overflow-scrolling: touch;
          margin-right: -30px;
          padding-right: 30px;
          >li{
            height: 40px;
            line-height: 40px;
            border-top: 1px solid #eee;
          }
          >.active{
            color: #aaa;
          }
        }
      }
    }
  .items_wrap{
    background: #fff;
    padding-top: 18px;
    >p{
      overflow: hidden;
      height: 14px;
      line-height: 14px;
      >span{
        float: left;
        margin-left: 30px;
        color: #888;
        font-weight: 500;
      }
      >b{
        float: right;
        margin-right: 22px;
        color: #888;
        font-weight: 500;
      }

    }
  }
  .items_content{
    padding-top: 1px;
    padding-bottom: 12px;
    >div{
      padding-top: 10px;
      border-top: 1px solid #ddd;
      margin-top: 8px;
      >p{
        float: left;
        width: 50px;
        height: 50px;
        line-height: 50px;
        margin-left: 20px;
        position: relative;
        >img{
          display: inline-block;
          width: 42px;
        }
        >b{
          position: absolute;
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          color: #fff;
          background: rgba(0,0,0,0.4);
        }
      }
      >div{
        overflow: hidden;
        height: 50px;
        text-align: left;
        padding-left: 10px;
        padding-top: 5px;
        >p{
          font-size: 13px;
          height: 30px;
          color: #333;
          line-height: 15px;
        }
        >div{
          overflow: hidden;
          font-size: 14px;
          color: #999;
          >p{
            float: left;
          }
          >span{
            float: right;
            margin-right: 28px;
          }
        }
      }
    }
  }
  .show{
    width: 160px;
    margin: 1px auto 0px auto;
    height: 28px;
    background-image: url('../assets/img/show.png');
    background-size: 100% 100%;
    line-height: 28px;
    color: #3c82ca;
    letter-spacing: 1px;
  }
  .mini{
    width: 160px;
    margin: 1px auto 0px auto;
    height: 28px;
    background-image: url('../assets/img/show.png');
    background-size: 100% 100%;
    line-height: 28px;
    color: #3c82ca;
    letter-spacing: 1px;
  }
  .payment_type_wrap{
    height: 30px;
    background: #fff;
    margin-top: 12px;
    >p{
      float: left;
      height: 30px;
      line-height: 30px;
      margin-left: 17px;
    }
    >div{
      float: right;
      height: 30px;
      line-height: 30px;
      margin-right: 14px;
      >span{
        display: block;
        width: 20px;
        float: left;
        height: 20px;
        margin-top: 5px;
        border: 1px solid #aaa;
        border-radius: 50%;
      }
      .active{
        border: none;
        background-size: 100% 100%;
        background-image: url('../assets/img/activeRed.png');
      }
      >b{
        margin-left: 4px;
      }
    }
  }
  .peisong_type_wrap{
    height: 30px;
    background: #fff;
    margin-top: 12px;
    >p{
      float: left;
      height: 30px;
      line-height: 30px;
      margin-left: 17px;
    }
    >div{
      float: right;
      height: 30px;
      line-height: 30px;
      margin-right: 14px;
      >span{
        display: block;
        width: 20px;
        float: left;
        height: 20px;
        margin-top: 5px;
        border: 1px solid #aaa;
        border-radius: 50%;
      }
      .active{
        border: none;
        background-size: 100% 100%;
        background-image: url('../assets/img/activeRed.png');
      }
      >b{
        margin-left: 4px;
      }
    }
  }
  .go_stair_type{
    width: 100%;
    padding-left: 2px;
    padding-right: 29px;
    background: #fff;
    margin-top: 12px;
    padding-top: 1px;
    padding-bottom: 12px;
    >div{
      height: 30px;
      margin-top: 12px;
      >span{
        float: left;
        width: 80px;
        height: 30px;
        line-height: 30px;
      }
      >b{
        overflow: hidden;
        display: block;
        height: 30px;
        line-height: 30px;
        border: 1px solid #aaa;
        border-radius: 10px;
      }
    }
  }
  .invoice_wrap{
    background: #fff;
    margin-top: 11px;
    overflow: hidden;
    >div{
      height: 30px;
      padding-right: 38px;
      >i{
        float: left;
        width: 20px;
        height: 20px;
        margin-left: 20px;
        margin-top: 5px;
        border-radius: 50%;
        border: 1px solid #aaa;
        background-size: 100% 100%;
      }
      >span{
        float: left;
        height: 30px;
        line-height: 30px;
        margin-left: 6px;
        color: #777;
      }
      >b{
        overflow: hidden;
        display: block;
        height: 30px;
        line-height: 30px;
      }
    }
    >p{
      float: right;
      height: 30px;
      line-height: 30px;
      margin-right: 20px;
      color: #888;
    }
  }
  .isInvoice{
    padding-top: 24px;
    >div{
      >i{
        border: none;
        background-image: url('../assets/img/activeRed.png');
      }
      >b{
        color: #f10;
      }
    }
   }
  .address_wrap{
    background: #fff;
    margin-top: 10px;
    padding-bottom: 5px;
     >div{
       padding-top: 10px;
       >p{
         padding-left: 20px;
         height: 30px;
         line-height: 30px;
         border-bottom: 1px solid #aaa;
         text-align: left;
       }
       >div{
         >.select_address{
           height: 40px;
           line-height: 40px;
           color: #aaa;
           padding-left: 20px;
           text-align: left;
         }
         >.address{
           padding-left: 20px;
           text-align: left;
           padding-bottom: 5px;
            >div{
              padding-top: 5px;
              margin-bottom: 8px;
              >span{
                margin-right: 7px;
              }
              >b{
                color: #aaa;
              }
            }
           >p{
              line-height: 14px;
           }
         }
       }
     }

  }
  .tack_time_wrap{
    background: #fff;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    >p{
      text-align: left;
      padding-left: 22px;
    }
    >div{
      overflow: hidden;
      margin-top: 11px;
      >p{
        float: left;
        height: 30px;
        line-height: 30px;
        width: 40%;
        margin-left: 5%;
        margin-right: 5%;
        border: 1px solid #aaa;
        border-radius: 5px;
      }
    }
  }
  .order_remark_wrap{
    height: 40px;
    margin-top: 10px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    >span{
      float: left;
      height: 40px;
      line-height: 40px;
      margin-left: 16px;
    }
    >div{
      overflow: hidden;
      height: 40px;
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      >input{
        text-align: center;
        display: block;
        width: 100%;
        border: none;
        outline: none;
        margin-top: 12px;
        /* border-bottom: 1px solid; */
      }
    }
  }
  .coupon_wrap{
    border-bottom: 1px solid #ddd;
    >p{
      height: 35px;
      line-height: 35px;
      background: #fff;
      padding-left: 15px;
      text-align: left;
    }
    >div{
      height: 35px;
      line-height: 35px;
      background: #fff;
      padding-left: 15px;
      text-align: left;
      >span{
        float: left;
      }
      >b{
        float: right;
        color: #f10;
        margin-right: 12px;
      }
      >i{
        float: right;
        width: 10px;
        height: 20px;
        margin-right: 20px;
        margin-top: 6px;
        background-image: url('../assets/img/right.png');
        background-size: 100% 100%;
      }
    }
  }
  .price_wrap{
    >p{
      height: 30px;
      line-height: 30px;
      background: #fff;
      font-size: 13px;

      >span{
        float: left;
        margin-left: 16px;
      }
      >b{
        float: right;
        margin-right: 28px;
        color: #f10;
        font-weight: 500;
      }
    }
  }
  .tijiao_wrap{
    height: 50px;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #aaa;
    max-width: 768px;
     >p{
       float: left;
       height: 50px;
       line-height: 50px;
       margin-left: 40px;
       font-size: 16px;
     }
    >div{
      float: right;
      width: 122px;
      text-align: center;
      height: 50px;
      background-color: #019fe8;
      line-height: 50px;
      font-size: 15px;
      color: #fff;
      &:active{
        background-color: #008ed7;
      }
    }
  }
  .loading_wrap{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      background-color: rgba(255,255,255,0.2);
    }
</style>
